import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { ListView } from 'antd-mobile'
import PropTypes from 'prop-types'
import ListViewItem from './listview_item'

class MyTopListView extends Component {
    constructor(props) {
        super(props)
        
        // const dataSource = new ListView.DataSource({
        //     rowHasChanged: (row1, row2) => row1 !== row2
        // })
        
        this.state = {
            dataSource:this.props.dataSource,
        }
    }
    static propTypes = {
        dataSource:PropTypes.any.isRequired
    }

    componentWillReceiveProps(nextProps){
        
        if (nextProps.dataSource !== this.props.dataSource){
            this.setState({
                dataSource: nextProps.dataSource,
            })
        }
    }

    render() {
        const row = (rowData, sectionID, rowID) => {
            return (
                <ListViewItem data={rowData} rowId={rowID}/>
            )
        }

        return (
            <ListView
                className="toplist"
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderSectionHeader={sectionData => (
                    <div style={{color:'white'}}>
                    {sectionData.title}
                    <Link to={`/typeNewsList/${sectionData.key}`} style={{ float: 'right', marginRight: '5px', color:'white',fontSize: '12px' }}>more</Link>
                    </div>
                )}
                renderRow={row}
                useBodyScroll={true}
            />
        )
    }
}

export default MyTopListView